<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理后台</title>
    <link rel="stylesheet" href="../../css/fontStyle.css">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/modelBox.css">
    <link rel="stylesheet" href="../../css/role/roleList.css">
    <link rel="stylesheet" href="../../css/backPage.css">
</head>
<body>
<!-- 查询 -->
<div class="select" id="select">
    <div>
        <input type="text" id="selectKey">
    </div>
    <div>
        <label>更新时间:</label>
        <input type="date" id="startTime">
        <label >至</label>
        <input type="date" id="endTime">
    </div>
    <div class="btn_add" title="角色添加"><a href="#add-modal-box" style="text-decoration:none;"><i class="iconfont icon-add">&#xe617;</i></a></div>
    <div class="btn_search" title="搜索" onclick="select()"><i class="iconfont icon-search">&#xe68f;</i></div>
    <div class="btn_reset" title="清空" onclick="clearAll()"><i class="iconfont icon-reset">&#xe946;</i></div>
</div>

<table class="table table-striped">
    <caption>角色列表</caption>
    <thead>
    <tr>
        <th><input type="checkbox" id="checkAll">全选</th>
        <th>id</th>
        <th>角色名称</th>
        <th>角色描述</th>
        <th>用户人数</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>更新时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>

<!-- 分页 -->
<div id="backPage"></div>

<!-- 添加模态框start -->
<div id="add-modal-box" class="modalBox">
    <div class="modalBox-dialog">
        <div><a href="#close" title="关闭" class="modalBox-close-btn">×</a></div>
        <div>
            <lable>添加角色</lable>
        </div>
        <div>
            <div>角色名称:</div>
            <div><input type="text" id="addName" name="addName"></div>
            <div><label id="nameTip"></label></div>
        </div>
        <div>
            <div>角色描述:</div>
            <div><input type="text" id="addDescription" name="addDescription"></div>
            <div><label id="descriptionTip"></label></div>
        </div>
        <div class="edit-button">
            <div><input type="button" value="添加" onclick="addRole()"></div>
            <div>
                <a href="#close" title="关闭" class="modalBox-close-btn">
                    <input type="button" value="取消">
                </a>
            </div>
        </div>
    </div>
</div>
<!-- end -->

<!-- 权限分配模态框start -->
<div id="distribute-modal-box" class="modalBox">
    <div class="modalBox-dialog distribute">
        <div><a href="#close" title="关闭" class="modalBox-close-btn">×</a></div>
        <div>
            <lable id="roleName"></lable>
            <lable id="roleDescription"></lable>
        </div>
        <div>
            <lable>权限分配</lable>
        </div>
        <div>
            <input id="checkRoleId" type="hidden">
            <div class="permissionItem">
                <span>为拥有权限：</span>
                <div id="NoPermissionMember">

                </div>
            </div>
            <div id="memberFunction">
                <div>
                    <div id="addPermissionMember" onclick="addPermissionMember('checkNoPermission')">add&gt;&gt;</div>
                    <div id="removePermissionMember" onclick="removePermissionMember('checkPermission')">&lt;&lt;remove</div>
                </div>
            </div>
            <div class="permissionItem">
                <span>已拥有权限：</span>
                <div id="PermissionMember">

                </div>
            </div>
        </div>
        <div class="edit-button">
            <div><a href="#close" title="关闭" onclick="findAll()" class="modalBox-close-btn">
                <input type="button" value="关闭">
            </a></div>
        </div>
    </div>
</div>
<!-- end -->

<!-- 修改模态框start -->
<div id="edit-modal-box" class="modalBox">
    <div class="modalBox-dialog">
        <div><a href="#close" title="关闭" class="modalBox-close-btn">×</a></div>
        <input id="updateId" name="delId" hidden="hidden">
        <div>
            <lable>修改角色</lable>
        </div>
        <div>
            <div>角色名称:</div>
            <div><input type="text" id="updateName" name="updateName"></div>
        </div>
        <div>
            <div>角色描述:</div>
            <div><input type="text" id="updateDescription" name="updateDescription"></div>
        </div>
        <div class="edit-button">
            <div>
                <a href="#close" title="关闭" class="modalBox-close-btn">
                    <input type="button" value="修改" onclick="doEdit()">
                </a>
            </div>
            <div>
                <a href="#close" title="关闭" class="modalBox-close-btn">
                    <input type="button" value="取消">
                </a>
            </div>
        </div>
    </div>
</div>
<!-- end -->

<!-- 删除模态框start -->
<div id="del-modal-box" class="modalBox">
    <div class="modalBox-dialog">
        <div><a href="#close" title="关闭" class="modalBox-close-btn">×</a></div>
        <input id="delId" name="delId" hidden="hidden">
        <div>
            <label id="tips"></label>
        </div>
        <div class="del-button">
            <div><input type="button" value="确认" onclick="doDel()"></div>
            <div>
                <a href="#close" title="关闭" class="modalBox-close-btn">
                    <input type="button" value="取消">
                </a>
            </div>
        </div>
    </div>
</div>
<!-- end -->

<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/role/roleList.js"></script>
<script src="../../js/checkBox.js"></script>
</body>
</html>